<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>景点详情 - 中国风景之美</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/detail.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <header class="header">
        <nav class="nav">
            <div class="logo">中国风景之美</div>
            <div class="nav-links">
                <a href="index.html">首页</a>
                <a href="index.html#gallery">风景画廊</a>
                <a href="index.html#map">地图导览</a>
                <a href="index.html#about">关于我们</a>
            </div>
        </nav>
    </header>

    <main class="detail-main">
        <canvas id="particleCanvas" class="particle-canvas"></canvas>
        
        <div class="detail-container">
            <div class="detail-header">
                <h1 id="locationName">景点名称</h1>
                <div class="location-info">
                    <i class="fas fa-map-marker-alt"></i>
                    <span id="locationAddress">地址</span>
                </div>
            </div>

            <div class="detail-content">
                <div class="detail-gallery">
                    <div class="main-image">
                        <img id="mainImage" src="" alt="景点图片">
                    </div>
                    <div class="thumbnail-container">
                        <!-- 缩略图将通过JavaScript动态加载 -->
                    </div>
                </div>

                <div class="detail-info">
                    <div class="info-section">
                        <h2>景点介绍</h2>
                        <p id="description">加载中...</p>
                    </div>

                    <div class="info-section">
                        <h2>最佳游览时间</h2>
                        <div id="bestTime">加载中...</div>
                    </div>

                    <div class="info-section">
                        <h2>交通指南</h2>
                        <div id="transportation">加载中...</div>
                    </div>

                    <div class="info-section">
                        <h2>门票信息</h2>
                        <div id="ticketInfo">加载中...</div>
                    </div>

                    <div class="info-section">
                        <h2>周边推荐</h2>
                        <div id="recommendations" class="recommendations-grid">
                            <!-- 推荐内容将通过JavaScript动态加载 -->
                        </div>
                    </div>
                </div>

                <div class="detail-reviews">
                    <h2>游客点评</h2>
                    <div class="review-stats">
                        <div class="overall-rating">
                            <span class="rating-number">4.8</span>
                            <div class="stars">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star-half-alt"></i>
                            </div>
                            <span class="review-count">(238条点评)</span>
                        </div>
                    </div>
                    <div id="reviewsList" class="reviews-list">
                        <!-- 评论将通过JavaScript动态加载 -->
                    </div>
                </div>
            </div>
        </div>
    </main>

    <footer class="footer">
        <div class="footer-content">
            <div class="footer-section">
                <h3>联系我们</h3>
                <p>Email: contact@chinascape.com</p>
            </div>
            <div class="footer-section">
                <h3>关注我们</h3>
                <div class="social-links">
                    <a href="#"><i class="fab fa-weixin"></i></a>
                    <a href="#"><i class="fab fa-weibo"></i></a>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2024 中国风景之美 版权所有</p>
        </div>
    </footer>

    <script type="module" src="js/particles.js"></script>
    <script type="module" src="js/detail.js"></script>
</body>
</html> 